<ui:composition template="/WEB-INF/templates/showcase.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:o="http://omnifaces.org/ui"
>
	<ui:define name="description">
		<p>
			The <code>&lt;o:validateOne&gt;</code> validates if ONLY ONE of the given <code>UIInput</code> components have been filled out.
		</p>
	</ui:define>

	<ui:define name="demo">
		<h:form>
			<h3>Please fill out only one of those fields</h3>
			<o:validateOne id="one" components="foo bar baz" />

			<h:panelGrid columns="3">
				<o:outputLabel for="foo" value="Foo" />
				<h:inputText id="foo" />
				<h:message for="foo" />

				<o:outputLabel for="bar" value="Bar" />
				<h:inputText id="bar" />
				<h:message for="bar" />

				<o:outputLabel for="baz" value="Baz" />
				<h:inputText id="baz" />
				<h:message for="baz" />

				<h:panelGroup />
				<h:commandButton value="submit">
					<f:ajax execute="@form" render="@form" />
				</h:commandButton>
				<h:panelGroup>
					<h:message for="one" />
					<h:outputText value="OK!" rendered="#{facesContext.postback and not facesContext.validationFailed}" />
				</h:panelGroup>
			</h:panelGrid>
		</h:form>
	</ui:define>
</ui:composition>